import { View } from '@tarojs/components'
import { memo } from 'react'
import useActivityQrcodeStore, { setCurrentTab } from '../../useActivityQrcodeStore'
import { QrcodeTabEnum } from '../../interface'
import './index.scss'

function Tabs() {
  const currentTab = useActivityQrcodeStore(state => state.currentTab)

  // 处理tab切换
  const handleTabChange = (tab: QrcodeTabEnum) => {
    setCurrentTab(tab)
  }

  return (
    <View className='qrcode-tabs'>
      <View className='qrcode-tabs__list'>
        <View
          className={`qrcode-tabs__item ${currentTab === QrcodeTabEnum.STAFF ? 'active' : ''}`}
          onClick={() => handleTabChange(QrcodeTabEnum.STAFF)}
        >
          员工活码
        </View>
        <View
          className={`qrcode-tabs__item ${currentTab === QrcodeTabEnum.GROUP ? 'active' : ''}`}
          onClick={() => handleTabChange(QrcodeTabEnum.GROUP)}
        >
          客户群活码
        </View>
      </View>
      <View
        className='qrcode-tabs__slider'
        style={{
          transform: `translateX(${currentTab === QrcodeTabEnum.STAFF ? '0' : '100'}%)`
        }}
      />
    </View>
  )
}

export default memo(Tabs)
